<template>
	<view class="apply-success">
		<navBar :navbarData.sync="navbarData"></navBar>
		<loading :showLoaded.sync="showLoaded"></loading>
		<view class="apply-container-2">
			<view class="itemStatus">
				<view class="position-text"> {{receiveInfo.sentDate?'待收货' : '待发货'}}</view>
				<image class="dividers_img" :src="dividersImg"></image>
				<!-- 待收货 文案内容 -->
				<block>
					<view class="text_75c">尊贵的麦卡伦贵宾</view>
					<view class="text_75c">
						{{receiveInfo.sentDate?'您申领的礼遇已发货' : '您申领的礼遇正在打包等待发货'}}
					</view>
				</block>
			</view>
			<image class="line_img"
				src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/cart/empty_cart_line3x.png">
			</image>
			<view style="padding: 0rpx 48rpx;">
				<view class="time">
					<view class="title">申领时间</view>
					<view class="info">{{receiveInfo.receiveDate}}</view>
				</view>
				<view class="gift-card">
					<image :src="receiveInfo.imgUrl" mode="widthFix"></image>
					<view class="right">
							<view class="title">礼遇名称：{{receiveInfo.giftName}}</view>
							<view class="info">x1</view>
					</view>
				</view>

				<view class="address-card">
					<view class="title"> <image class="location_iconimg" :src="locationIconImg"></image>配送信息</view>
					<view style="padding-left: 48rpx;">
						<view class="express-2">
							<view class="expressinfo" style="height: 48rpx;line-height: 48rpx;">{{receiveInfo.receiverInfo.receiverName}}  {{receiveInfo.receiverInfo.receiverMobile}}</view>
							<view  style="color:#757575 !important;height: 48rpx;line-height: 48rpx;" >{{receiveInfo.receiverInfo.receiverState}}  {{receiveInfo.receiverInfo.receiverCity}} {{receiveInfo.receiverInfo.receiverDistrict}}</view>
							<view  style="color:#757575 !important;height: 48rpx;line-height: 48rpx;">{{receiveInfo.receiverInfo.receiverTown}}  {{receiveInfo.receiverInfo.receiverAddress}}</view>
						</view>
						<view v-if="receiveInfo.expressInfo" class="trackingNumber-box">
							<view style="color:#757575 !important">快递单号 {{receiveInfo.expressInfo.trackingNumber}}</view>
							<view class="text" style="border-bottom: 2rpx solid #000  !important;"   @tap="handleCheckExpress(receiveInfo.expressInfo.trackingNumber)">查看物流</view>
						</view>
					</view>
						
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	import api from '@/api/api';
	import tip from '@/utils/tip';
	import NavBar from '@/components/common/navbar';
	import Loading from '@/components/common/loading';
	import {
		CUSTOMER_INFO
	} from '@/utils/constant';
	export default {
		components: {
			navBar: NavBar,
			loading: Loading,
		},
		data() {
			return {
				navbarData: {
					showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
					navbarTitle: '领取详情',
					hideSearch: true,
					hideHome: false,
				},
				receiveInfo: {},
				applyStatusText: '您已成功领取本次活动礼遇！',
				applyStatus: '申领成功',
				nowPages: '',
				showLoaded: true,
				locationIconImg:'',
				dividersImg:''
			}
		},
		onLoad(option) {
			if (option.recordId) {
				this.getReceiveInfo(option.recordId)
			}
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1];
			this.nowPages = currPage.route;
			const {
				locationSvgImg,
				paySuccessIconSvgImg
			} = require('./imgs.svg.js');
			 this.locationIconImg = locationSvgImg('#000');
			this.dividersImg = paySuccessIconSvgImg("#000");
		},
		onShow() {
			getApp().cl_tracker.track('mini_program_view', {
				path: this.nowPages,
				pageName: '领取详情',
			})

		},
		methods: {
			async getReceiveInfo(recordId) {
				let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
				const res = await api.getReceiveInfo({
					header: {
						jwt: customerInfo.jwt
					},
				}, recordId);
				if (res.code === 1000) {
					this.receiveInfo = res.data
					if (res.data.sentDate) {
						this.applyStatus = '待收货'
						this.applyStatusText = '您的礼遇已发货，请保持电话畅通，以备快递人员及时联系。'
					} else {
						this.applyStatus = '申领成功'
						this.applyStatusText = '您已成功领取本次活动礼遇！'
					}
					const params={
						page_name:'领取详情',
						gift_name: this.receiveInfo?.giftName || '',
					}
					this.$commonSensors.giftsDetailTrack('GiftsDetailPageView',params)
					this.trackGiftGetOpen();
					setTimeout(() => {
						this.showLoaded = false
					}, 50)
				}
			},
			handleCheckExpress(e) {
			  uni.navigateTo({
			    url: '/pages/memberGift/logisticsGift?id=' + this.receiveInfo.id
			  });
			},
			trackGiftGetOpen() {
				let eventName = 'c_ebmp_treatment_gift_get_open';
				let trackParams = {
					"c_gift_name": this.receiveInfo.giftName,
					"c_customer_address_province": this.receiveInfo.receiverInfo.receiverState,
					"c_customer_address_city": this.receiveInfo.receiverInfo.receiverCity,
					"c_customer_address_county": this.receiveInfo.receiverInfo.receiverDistrict,
					"c_customer_address_area": this.receiveInfo.receiverInfo.receiverTown,
					"c_customer_address_address": this.receiveInfo.receiverInfo.receiverAddress,
					"c_gift_status": this.receiveInfo.sentDate ? '已发货' : '待发货',
				};
				getApp().commonClTrack(eventName, trackParams);
			},
			copyTrackingNumber(content) {
				uni.setClipboardData({
					data: content,
					success: function(res) {
						uni.showToast({
							title: '复制成功'
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #ffff;
	}


	.apply-container-2 {



		.itemStatus {
			box-sizing: border-box;
			text-align: center;
			width: 100%;
			height: 464rpx;
			padding:  96rpx  48rpx 0;



			.position-text {
				font-family: NotoSansSC-Medium;
				font-size: 64rpx;
				font-weight: 500;
				line-height: 80rpx;
				text-align: center;
			}

			.dividers_img {
				width: 143.22rpx;
				height: 40rpx;
				margin: 40rpx auto;
			}

			.text_75c {
				font-family: NotoSansSC-Regular;
				font-size: 24rpx;
				font-weight: normal;
				line-height: 40rpx;
				text-align: center;
				letter-spacing: 0px;
				color: #757575;
			}
		}

		.line_img {
			width: 750rpx;
			height: 12rpx;
			margin-bottom: 64rpx;
		}


		.time {
			font-family: FrankNew-Regular, NotoSansSC-Regular;
			font-size: 24rpx;
			font-weight: normal;
			line-height: 40rpx;
			letter-spacing: 0rpx;
			display: flex;
			margin-bottom: 32rpx;

			.title {
				display: inline-block;
				margin-right: 16rpx;
				line-height: 40rpx;

			}

			.info {
				display: inline-block;

			}

		}

		.apply-status {
			text-align: center;
			margin-bottom: 24rpx;

			image {
				width: 140rpx;
			}

			.status {
				margin-bottom: 28rpx;
				font-size: 28rpx;
				color: #1A1A1A;
			}

			.text {
				height: 68rpx;
				width: 480rpx;
				margin: auto;
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #1A1A1A;
				display: flex;
				align-items: flex-start;
				line-height: 34rpx;

				justify-content: center;

				&.textleft {
					padding-left: 16rpx;
				}
			}
		}



		.gift-card {
			
			display: flex;
			padding: 32rpx 0 32rpx 32rpx;
			background: #FAFAFA;

			image {
				width: 160rpx;
				margin-right: 40rpx;
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items:flex-start;
				.list {
					color: #474747;
					line-height: 40rpx;
					word-break: break-all;


					.title {
						width: 140rpx;
						font-size: 28rpx;
					}

					.info {
						flex: 1;
						font-size: 28rpx;

						.express {
							font-size: 28rpx;

							.expressinfo {
								margin-right: 10rpx;
							}
						}

						.text {
							font-size: 20rpx;
							color: #7C2D3B;
						}
					}
				}
			}
		}

		.address-card {
			border-top: 2rpx solid #F2F2F2;
			margin-top: 48rpx;
			padding-top: 38rpx;
			margin-bottom: 40rpx;
			font-size: 24rpx;
			.location_iconimg{
			  width: 48rpx;
			  height: 48rpx;
			  flex-shrink: 0;
			}
			.title {
				font-family:  NotoSansSC-Medium;
				font-size: 24rpx;
				line-height: 40px;
				text-transform: uppercase;
				letter-spacing: 0px;
				color: #000000;

				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items:center;
			}

			.express-2 {
				font-family: FrankNew-Regular, NotoSansSC-Regular;
				color: #757575 !important
			}


			.trackingNumber-box {
				margin-top: 32rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items:center;

				.trackingNumber {
					font-family: FrankNew-Regular, NotoSansSC-Regular;
					color: #757575 !important;
						font-size: 24rpx;
						height: 54rpx;
						line-height: 54rpx;
				}

				.text {
					font-size: 24rpx;
					height: 54rpx;
					line-height: 54rpx;


				}
			}
		}
	}
</style>
